<#assign module="driver"/>

<@override name="header">
<link rel="stylesheet" href="${ctx}/assets/css/form.css">
<style>
	/* autocomplete */
	div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;z-index:998;}
	div.ac > ul {margin-top:10px;padding:0;}
	div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
	div.ac > ul > li:hover{background:#eee;}
	div.ac > ul > li > div span {padding-left:15px;}
	div.ac > ul > li > div span em {color:red;font-style: normal;}
</style>
</@override>
<@override name="body">

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default" style="height:640px;">
				<div class="panel-heading">
					添加服务人员评论
			    </div>
			    <div class="panel-body">
    				<form id="submit_form" action="${ctx}/rate/create" class="form-horizontal" method="post">

		              	<input type="hidden" name="goOn" id="goOn" value="false" />
		                <input type="hidden" name="starLevel" id="starLevel" />
		                <input type="hidden" name="driverId" id="driverId" />
		                <input type="hidden" name="driverName" id="driverName" />
		                <#if driver??>
		                	<input type="hidden" name="page2" value="true" />
		                </#if>

		                <div class="form-group">
		                    <label class="col-sm-3 control-label"><em>*</em>客户姓名：</label>
		                    <div class="col-sm-3">
		                    	<input class="form-control" id="memberName" name="memberName" type="text" required/>
		                    </div>
		                </div>

		                <div class="form-group">
		                    <label class="col-sm-3 control-label"><em>*</em>客户电话：</label>
		                    <div class="col-sm-3">
		                    	<input class="form-control" id="memberPhone" name="memberPhone" type="text"/>
		                    </div>
		                </div>

		                <div class="form-group">
		                    <label class="col-sm-3 control-label"><em>*</em>服务人员：</label>
		                    <div class="col-sm-3">
		                    	<input class="form-control" id="whichDriver" type="text" required/>
		                    </div>
		                </div>

		                <div class="form-group">
		                    <label class="col-sm-3 control-label"></label>
		                    <div class="col-sm-3" id="drivers_ul">
		                    </div>
		                </div>

						<div class="form-group">
		                    <label class="col-sm-3 control-label"><em>*</em>评分：</label>
		                    <div id="rateDiv" class="col-sm-1 form-control-static" style="width:70px;">
		                    </div>
		                    <div class="col-sm-2 form-control-static">
		                    	<div id="rateChose"></div>
		                    </div>

		                </div>

		                <div class="form-group">
		                    <label class="col-sm-3 control-label"><em>*</em>内容：</label>
		                    <div class="col-sm-5">
		                    	<textarea class="form-control" cols="20" id="content" name="content" rows="6" maxlength="50" required></textarea>
		                    	<span>最多不超过50个字符，已输入<span id="putWords" style="color:red;">0</span>个字符。</span>
		                    </div>
		                </div>

		                <div class="form-group" style="margin-left:10px;">
			                <label class="col-sm-3 control-label"></label>
			                <input id="submit_button" type="submit" class="btn btn-primary" value="保存">
			                <input type="button" class="btn btn-default" onclick="javascript:history.go(-1);" value="返回">
			            </div>

					</form>
        		</div>
			</div>
		</div>
	</div>

</@override>
<@override name="footer">
<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
<script src="${ctx}/assets/js/jquery.raty.js"></script>
<script type="text/javascript">
	$(document).ready(function(){

		$("#content").keyup(function(){
			$("#putWords").html($(this).val().length);
		});

		//评分
		rat('rateChose',1);
		$("#starLevel").val(5);
		$("#rateDiv").html("5星");


		//服务人员搜索
		$('#whichDriver').AutoComplete({
            'data': "${ctx}/driver/findDriver",
			'ajaxDataType': 'json',
            'width': 'auto',
            'async': true,
            'listStyle': 'custom',
	        'emphasis': false,
	        'matchHandler': function(keyword, data){
	            return true;
	        },
	        'createItemHandler': function(index, data){
	        	return "<span>"+data.realname+" "+data.username+" "+data.phone+"</span>";
	        },
	        'afterSelectedHandler': function(data){
	        	$("#drivers_ul").empty();
	        	var tpl = '<div data-driver-id="'+data.driverID+'">已选择：'+data.realname+'   '+data.username+'   '+data.phone+'</div>';
	        	$("#drivers_ul").append(tpl);
	        	$("#driverId").val(data.id);
	        	$("#driverName").val(data.name);
	        	$('#whichDriver').val(data.realname+'   '+data.username+'   '+data.phone);
	        }
        }).AutoComplete('show');

        <#if driver??>
			$("#drivers_ul").empty();
        	var tpl = '<div data-driver-id="${driver.id}">已选择：${driver.realname?if_exists}   ${driver.username}   ${driver.phone}</div>';
        	$("#drivers_ul").append(tpl);
        	$("#driverId").val("${driver.id}");
        	$("#driverName").val("${driver.realname?if_exists}");
        	$('#whichDriver').val("${driver.realname?if_exists}   ${driver.username}   ${driver.phone}");
		</#if>

		$("#submit_form").submit(function(){

			if($("#memberPhone").val() == null || $("#memberPhone").val().trim() == ""){
			 	$.scojs_message("请输入电话号码", $.scojs_message.TYPE_ERROR);
				return false;
			} else if(!(/(^[0-9]*$)/.test($("#memberPhone").val()))) {
			 	$.scojs_message("电话号码格式不正确", $.scojs_message.TYPE_ERROR);
				return false;
			}
			if($("#driverId").val()==""){
				$.scojs_message("请选择服务人员", $.scojs_message.TYPE_ERROR);
				return false;
			}

			var flag = window.confirm("是否继续添加评论?");
			if(flag){
				// $("#goOn").val(true);
			}else{
				return false;
			}

			return true;
		});

	});

	function rat(star,m){

			star= '#' + star;

			$(star).raty({
				path: "${ctx}/assets/css/images",
				starOff: 'star-off-big.png',
				starOn: 'star-on-big.png',
				starHalf: 'star-half-big.png',
				size: 24,
				start: 5,
				half:true,
				targetKeep : true,
				number:5,
				score:5,
				click: function (score, evt) {
					$("#starLevel").val(score*m);
					$("#rateDiv").html(score*m+"星");
				}
			});

		}
</script>
</@override>
<@extends name="../layout.ftl"/>